import { Link } from 'react-router-dom';
import { Globe, Shield, Zap, Check, ArrowRight } from 'lucide-react';
import Button from '../components/Button';
import { useLanguage } from '../contexts/LanguageContext';
import { useLocalizedLink } from '../hooks/useLocalizedLink';

const Products = () => {
  const { t } = useLanguage();
  const { getLink } = useLocalizedLink();

  const products = [
    {
      id: 'dynamic-residential',
      icon: Globe,
      color: 'from-blue-500 to-blue-600',
      iconBg: 'bg-blue-500/10',
      iconColor: 'text-blue-500',
      link: '/pricing/dynamic-residential-ipv6'
    },
    {
      id: 'static-residential',
      icon: Shield,
      color: 'from-purple-500 to-purple-600',
      iconBg: 'bg-purple-500/10',
      iconColor: 'text-purple-500',
      link: '/pricing/static-residential-ipv6'
    },
    {
      id: 'datacenter',
      icon: Zap,
      color: 'from-orange-500 to-orange-600',
      iconBg: 'bg-orange-500/10',
      iconColor: 'text-orange-500',
      link: '/pricing/datacenter-ipv6'
    }
  ];

  return (
    <div className="w-full">
      {/* Hero Section */}
      <section className="bg-[#0f1c3f] dark:bg-gray-800 text-white py-20 transition-colors duration-300">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto text-center">
            <h1 className="text-4xl md:text-5xl font-bold mb-6">
              {t('products.hero.title')}
            </h1>
            <p className="text-xl text-gray-300 dark:text-gray-200 mb-8 max-w-3xl mx-auto">
              {t('products.hero.subtitle')}
            </p>
          </div>
        </div>
      </section>

      {/* Products Grid */}
      <section className="py-20 bg-white dark:bg-gray-900 transition-colors duration-300">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 max-w-7xl mx-auto">
            {products.map((product) => {
              const Icon = product.icon;
              return (
                <div
                  key={product.id}
                  className="group relative bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 p-8 hover:border-[#00d4ff] dark:hover:border-[#00d4ff] hover:shadow-2xl transition-all duration-300 flex flex-col h-full"
                >
                  {/* Icon */}
                  <div className={`w-16 h-16 ${product.iconBg} dark:${product.iconBg} rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300`}>
                    <Icon className={`${product.iconColor} dark:${product.iconColor}`} size={32} />
                  </div>

                  {/* Title */}
                  <h2 className="text-2xl font-bold text-[#0f1c3f] dark:text-white mb-3">
                    {t(`products.${product.id}.title`)}
                  </h2>

                  {/* Description - Fixed height for alignment */}
                  <div className="mb-6 h-[7.5rem]">
                    <p className="text-gray-600 dark:text-gray-300 leading-relaxed">
                      {t(`products.${product.id}.description`)}
                    </p>
                  </div>

                  {/* Features */}
                  <ul className="space-y-3 mb-8">
                    {t(`products.${product.id}.features`).map((feature: string, index: number) => (
                      <li key={index} className="flex items-start">
                        <Check className="text-[#00c853] dark:text-green-400 mr-3 mt-1 flex-shrink-0" size={18} />
                        <span className="text-gray-700 dark:text-gray-300 text-sm">{feature}</span>
                      </li>
                    ))}
                  </ul>

                  {/* Use Cases */}
                  <div className="mb-8">
                    <h3 className="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3">
                      {t('products.useCases')}
                    </h3>
                    <div className="flex flex-wrap gap-2 min-h-[4rem]">
                      {t(`products.${product.id}.useCases`).map((useCase: string, index: number) => (
                        <span
                          key={index}
                          className="px-3 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs rounded-full h-fit"
                        >
                          {useCase}
                        </span>
                      ))}
                    </div>
                  </div>

                  {/* CTA Button - Pinned to bottom */}
                  <div className="mt-auto">
                    <Link to={getLink(product.link)}>
                      <Button
                        variant="gradient"
                        fullWidth
                        className="group-hover:shadow-lg transition-shadow duration-300"
                      >
                        <span className="flex items-center justify-center">
                          {t('products.viewPricing')}
                          <ArrowRight size={18} className="ml-2 group-hover:translate-x-1 transition-transform duration-300" />
                        </span>
                      </Button>
                    </Link>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* Comparison Table */}
      <section className="py-20 bg-gray-50 dark:bg-gray-800/50 transition-colors duration-300">
        <div className="container mx-auto px-4">
          <div className="max-w-6xl mx-auto">
            <div className="text-center mb-12">
              <h2 className="text-3xl md:text-4xl font-bold text-[#0f1c3f] dark:text-white mb-4">
                {t('products.comparison.title')}
              </h2>
              <p className="text-lg text-gray-600 dark:text-gray-300">
                {t('products.comparison.subtitle')}
              </p>
            </div>

            <div className="overflow-x-auto">
              <table className="w-full bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 transition-colors duration-300">
                <thead>
                  <tr className="border-b border-gray-200 dark:border-gray-700">
                    <th className="px-6 py-4 text-left text-sm font-semibold text-gray-900 dark:text-white">
                      {t('products.comparison.feature')}
                    </th>
                    <th className="px-6 py-4 text-center text-sm font-semibold text-gray-900 dark:text-white">
                      {t('products.dynamicResidential.title')}
                    </th>
                    <th className="px-6 py-4 text-center text-sm font-semibold text-gray-900 dark:text-white">
                      {t('products.staticResidential.title')}
                    </th>
                    <th className="px-6 py-4 text-center text-sm font-semibold text-gray-900 dark:text-white">
                      {t('products.datacenter.title')}
                    </th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
                  {t('products.comparison.rows').map((row: any, index: number) => (
                    <tr key={index} className="hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors duration-200">
                      <td className="px-6 py-4 text-sm font-medium text-gray-900 dark:text-white">
                        {row.feature}
                      </td>
                      <td className="px-6 py-4 text-center text-sm text-gray-600 dark:text-gray-300">
                        {row.dynamic === true ? (
                          <Check className="inline text-[#00c853] dark:text-green-400" size={20} />
                        ) : row.dynamic}
                      </td>
                      <td className="px-6 py-4 text-center text-sm text-gray-600 dark:text-gray-300">
                        {row.static === true ? (
                          <Check className="inline text-[#00c853] dark:text-green-400" size={20} />
                        ) : row.static}
                      </td>
                      <td className="px-6 py-4 text-center text-sm text-gray-600 dark:text-gray-300">
                        {row.datacenter === true ? (
                          <Check className="inline text-[#00c853] dark:text-green-400" size={20} />
                        ) : row.datacenter}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-20 bg-[#0f1c3f] dark:bg-gray-900 text-white transition-colors duration-300">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-3xl md:text-4xl font-bold mb-6">
            {t('products.cta.title')}
          </h2>
          <p className="text-xl text-gray-300 dark:text-gray-200 mb-8 max-w-2xl mx-auto">
            {t('products.cta.subtitle')}
          </p>
          <div className="flex flex-col sm:flex-row justify-center items-center gap-4">
            <Link to={getLink('/register')}>
              <Button size="lg" variant="gradient" className="min-w-[180px]">
                {t('products.cta.getStarted')}
              </Button>
            </Link>
            <Link to={getLink('/support')}>
              <Button size="lg" variant="outline" className="min-w-[180px]">
                {t('products.cta.contactSales')}
              </Button>
            </Link>
          </div>
        </div>
      </section>
    </div>
  );
};

export default Products;
